<template>
  <div class="category">
    <div class="top">
      <cate-header :categoryDisplayName="categoryDisplayName"></cate-header>
      <cate-navbar
        :tabList="tabList"
        :code="code"
        :categoryCode="categoryCode"
        @tab-list="tabListFoo"
        @tab-select="tabListFoo"
      ></cate-navbar>
    </div>

    <div :class="['drop',isDrop == true ? 'active':'']" ref="drop" @click="backTop">
      综合排序<van-icon name="arrow-down" />
    </div>

    <div class="nav">

        <div :class="['navbar',isShow == true ? 'active':'']" >
      <cate-select
        :categoryMeta="categoryMeta"


        @show-mask="showMask"
        @updata="upData1"
        ref="cateSelect"
      ></cate-select>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <ul class="com">
        <li v-for="(item, i) in list" :key="i">
          <a>
            <cate-item
              :id="item.albumId"
              :img="item.img"
              :salePoint="item.salePoint"
              :title="item.title"
              :statCountInfo="item.statCountInfo"
            ></cate-item>
          </a>
        </li>
      </ul>
    </van-list></div>
    <div class="mask" v-if="isShow" @click='closeMask'></div>

    <rank-load v-if="flag"></rank-load>
    <my-footer v-else></my-footer>


    
  </div>
</template>

<script>
import CateHeader from "@/views/category/catagorycomp/CateHeader.vue";
import CateNavbar from "@/views/category/catagorycomp/CateNavbar.vue";
import CateSelect from "@/views/category/catagorycomp/CateSelect.vue";
import CateItem from "@/views/category/catagorycomp/CateItem.vue";
import { initCategoryListData } from "@/request/api.js";

export default {
  data() {
    return {
      categoryCode: "",
      subCategoryCode: "",
      page: 1,
      pageSize: 10,
      sort: 0,
      categoryDisplayName: "",

      code: "",
      tabList: [],
      categoryMeta: [],
      list: [],
      isShow: false,
      flag: false,
      loading: true,
      finished: false,
      isDrop:false,
      a:false
     
    };
  },
  components: {
    CateHeader,
    CateNavbar,
    CateSelect,
    CateItem,
  },
  created() {
    this.categoryCode = this.$route.params.category;
    this.subCategoryCode = this.$route.params.name;

    this.initData();
    //   this.initData()
  },
  methods: {
    async initData() {
      this.flag = localStorage.getItem("loading");

      let list = [];
      let data = {
        categoryCode: this.categoryCode,
        subCategoryCode: this.subCategoryCode || "",
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sort,
            more:true
      };
      let { data: res } = await initCategoryListData(data);
      console.log("分类列表:",res)
      this.categoryDisplayName = res.data.categoryDisplayName;
      this.tabList = res.data.subCategories;
      this.categoryMeta = res.data.categoryMetaDatas;
      
      this.code = res.data.subCategoryCode;

      res.data.firstPageCategoryAlbums.albumBriefDetailInfos.forEach((item) => {
        let obj = {
          albumId: item.albumInfo.id,
          img: "https://imagev2.xmcdn.com/" + item.albumInfo.cover,
          salePoint: item.albumInfo.salePoint,
          title: item.albumInfo.title,
          statCountInfo: item.statCountInfo,
        };

        list.push(obj);
      });

      setTimeout(() => {
        this.list.push(...list);
        this.flag = false;
        localStorage.setItem("loading", this.flag);
      }, 500);

      this.loading = false;

    
    },

    showMask(val) {
      this.isShow = val;
    },

    tabListFoo(obj) {
      this.subCategoryCode = obj.code;
      this.code = obj.code;
      this.list = [];
      this.page = 1;
      this.flag = false;
      this.loading = true;
      this.initData();
      
    },

    async onLoad() {
      let list = [];
      let data = {
        categoryCode: this.categoryCode,
        subCategoryCode: this.subCategoryCode,
        page: this.page++,
        pageSize: this.pageSize,
        sort: this.sort,
        more:true
      
      };
      let { data: res } = await initCategoryListData(data);
      
      // console.log("牛逼",res.data.firstPageCategoryAlbums.albumBriefDetailInfos)
      res.data.firstPageCategoryAlbums.albumBriefDetailInfos.forEach((item) => {
        let obj = {
          albumId: item.albumInfo.id,
          img: "https://imagev2.xmcdn.com/" + item.albumInfo.cover,
          salePoint: item.albumInfo.salePoint,
          title: item.albumInfo.title,
          statCountInfo: item.statCountInfo,
        };

        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }
    },

    upData1(val) {
      this.list = [];
      this.page = 1;
      this.sort = val;
      this.initData();
    },

    backTop() {

        window.scroll(0,0)
        
        // this.isShow = !this.isShow
    },

    closeMask(){
        
        this.isShow = false
        // this.isClose = false
       
    },
    
  },
  mounted() {
    document.addEventListener("scroll", () => {
      if (window.pageYOffset >= 100) {
          this.isDrop = true
        return;
      } else {
        this.isDrop = false
      }
    });


     if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    document.removeEventListener("scroll", document, false);
    window.removeEventListener("popstate", this.goBack, false);
  },
};
</script>

<style lang="scss" scoped>
.category {
  padding-top: 86px;
  .com {
    padding-left: 15px;
    li {
      a {
        display: block;
      }
    }
  }
}
.top {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
  background-color: #fff;
}
.drop {
  position: fixed;
  left: 0;
  top: 86px;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  font-size: 14px;
  color: #f86442;
  width: 100%;
  height: 42px;
  text-align: center;
  line-height: 42px;
  transform: translateY(-100%);
  transition: all 0.5s ease;
  z-index: 100;
  i {
    margin-left: 20px;
  }
}
.nav{
    position: relative;
    padding-top: 44px;
    .navbar{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 101;
        background-color: #fff;
        width: 100%;
    }
    .navbar.active{
        position: fixed;
        top: 85px;
        left: 0;
        width: 100%;
         z-index: 101;
        background-color: #fff;

    }
    
}
.drop.active {
  transform: translateY(0);
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/deep/.header {
  padding-bottom: 0;
}
</style>

